<template>
  <div class="roleSet">
    <div class="content__body">
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formRef"
        label-width="80px"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="formData.roleName" class="width-custom"></el-input>
        </el-form-item>

        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="formData.roleDesc" class="width-custom"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="content__footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, toRef, ref, PropType } from "vue";
import { addthdRole, updatethdRole } from "/@/api/projects";
import NotifMessage from "/@/utils/message/notification";
import { ModeType, RoleInfoType } from "../types";
import { storageLocal } from "/@/utils/storage";
export default defineComponent({
  name: "roleSet",
  props: {
    mode: {
      type: String as PropType<ModeType>,
      require: true,
      default: "add"
    },
    roleInfo: {
      type: Object as PropType<RoleInfoType>,
      require: false,
      default: null
    }
  },
  emits: ["emitClose"],
  setup(props, { emit }) {
    let formRef = ref<HTMLFormElement | null>(null) as any;
    const roleInfoProp = toRef(props, "roleInfo");
    let state = reactive({
      formData: {
        roleName: "",
        roleDesc: "",
        roleType: "1",
        roleMark: "2",
        projectManageId: storageLocal.getItem("projectInfo")?.id,
        projectName: storageLocal.getItem("projectInfo")?.name
      }
    });

    // 如果是编辑状态
    if (props.mode === "edit") {
      state.formData.roleName = roleInfoProp.value.roleName;
      state.formData.roleDesc = roleInfoProp.value.roleDesc;
    }

    const formRules = ref({
      roleName: [
        { required: true, message: "请输入角色名称", trigger: "blur" }
      ],
      roleDesc: [{ required: true, message: "请输入角色描述", trigger: "blur" }]
    });

    const onAddRole = async () => {
      try {
        const isValid = await new Promise(resolve =>
          formRef.value.validate(resolve)
        );
        if (!isValid) return;
        let params = Object.assign({ sectionId: "B" }, state.formData);
        const { code, message } = await addthdRole(params);
        if (code === 200) {
          NotifMessage.success("添加成功");
          handleCancel();
        } else {
          NotifMessage.error(message);
        }
      } catch (error) {
        console.log(error);
      }
    };

    const onUpdateRole = async () => {
      try {
        const isValid = await new Promise(resolve =>
          formRef.value.validate(resolve)
        );
        if (!isValid) return;
        let params = Object.assign(
          { id: roleInfoProp.value.id },
          state.formData
        );
        const { code, message } = await updatethdRole(params);
        if (code === 200) {
          NotifMessage.success("编辑成功");
          handleCancel();
        } else {
          NotifMessage.error(message);
        }
      } catch (error) {
        console.log(error);
      }
    };

    const handleCancel = () => {
      emit("emitClose");
    };

    const handleSubmit = () => {
      if (props.mode === "edit") {
        onUpdateRole();
      } else {
        onAddRole();
      }
    };

    return {
      props,
      formRef,
      ...toRefs(state),
      formRules,
      handleCancel,
      handleSubmit
    };
  }
});
</script>

<style lang="scss" scoped>
.roleSet {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .content__body {
    width: 100%;
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    &__tree {
      padding: 10px;
      p {
        font-size: 14px;
        color: #606266;
        line-height: 32px;
      }
    }
  }
  .content__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 60px;
    border-top: 1px solid rgba(0, 21, 41, 0.15);
    padding: 15px;
  }
}
</style>
